<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=yes">
	<title>PPTXjs - Meshesha</title>

	<link rel="stylesheet" href="./css/pptxjs.css">
	<link rel="stylesheet" href="./css/nv.d3.min.css">

	<script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script>
	<script type="text/javascript" src="./js/jszip.min.js"></script>
	<script type="text/javascript" src="./js/filereader.js"></script>
	<script type="text/javascript" src="./js/d3.min.js"></script>
	<script type="text/javascript" src="./js/nv.d3.min.js"></script>
	<script type="text/javascript" src="./js/pptxjs.min.js"></script>
	<script type="text/javascript" src="./js/divs2slides.min.js"></script>
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #d4d4d4;
		}
	</style>
</head>

<body>
	<button id="fileBtn">选择文件</button>
	<div id="result"></div>
	<script>
		let fileUrl = ''
		const fileBtn = document.querySelector('#fileBtn')
		fileBtn.addEventListener('click', () => {
			const input = document.createElement('input');
			input.type = 'file';
			input.addEventListener('change', (e) => {
				console.log('e', input.files[0]);
				fileUrl = URL.createObjectURL(input.files[0])
				showFile()
			})
			input.click()
		});
		const showFile = ()=>{
		$("#result").pptxToHtml({
			pptxFileUrl: fileUrl,
			fileInputId: "uploadFileInput",
			slideMode: false,
			keyBoardShortCut: false,
			slideModeConfig: {  //on slide mode (slideMode: true)
				first: 1,
				nav: false, /** true,false : show or not nav buttons*/
				navTxtColor: "white", /** color */
				navNextTxt: "&#8250;", //">"
				navPrevTxt: "&#8249;", //"<"
				showPlayPauseBtn: false,/** true,false */
				keyBoardShortCut: false, /** true,false */
				showSlideNum: false, /** true,false */
				showTotalSlideNum: false, /** true,false */
				autoSlide: false, /** false or seconds (the pause time between slides) , F8 to active(keyBoardShortCut: true) */
				randomAutoSlide: false, /** true,false ,autoSlide:true */
				loop: false,  /** true,false */
				background: "black", /** false or color*/
				transition: "default", /** transition type: "slid","fade","default","random" , to show transition efects :transitionTime > 0.5 */
				transitionTime: 1 /** transition time in seconds */
			}
		});
		}

		//----------------
		// const params = new URLSearchParams(window.location.search);
		// const fileUrl = params.get("file");
		// $("#result").pptxToHtml({
		// 	pptxFileUrl: fileUrl,
		// 	fileInputId: "uploadFileInput",
		// 	slideMode: false,
		// 	keyBoardShortCut: false,
		// 	slideModeConfig: {  //on slide mode (slideMode: true)
		// 		first: 1,
		// 		nav: false, /** true,false : show or not nav buttons*/
		// 		navTxtColor: "white", /** color */
		// 		navNextTxt: "&#8250;", //">"
		// 		navPrevTxt: "&#8249;", //"<"
		// 		showPlayPauseBtn: false,/** true,false */
		// 		keyBoardShortCut: false, /** true,false */
		// 		showSlideNum: false, /** true,false */
		// 		showTotalSlideNum: false, /** true,false */
		// 		autoSlide: false, /** false or seconds (the pause time between slides) , F8 to active(keyBoardShortCut: true) */
		// 		randomAutoSlide: false, /** true,false ,autoSlide:true */
		// 		loop: false,  /** true,false */
		// 		background: "black", /** false or color*/
		// 		transition: "default", /** transition type: "slid","fade","default","random" , to show transition efects :transitionTime > 0.5 */
		// 		transitionTime: 1 /** transition time in seconds */
		// 	}
		// });
	</script>

</body>

</html>